<template>
    <h1>列表渲染v-for</h1>

    <!--1. v-for循环数组的每一项 -->
    <!-- 打印出：Foo Bar -->
    <div v-for="item of items"> {{ item.message }}</div>
    <!--2. 解构赋值直接渲染 -->
    <!-- 打印出：Foo Bar -->
    <div v-for="{ message } of items"> {{ message }}</div>

    <!-- 3. 添加索引的渲染 -->
    <!-- 打印出：父级Foo - 0  父级Bar - 1 -->
    <div v-for="(item, index) of items"> {{ parentMessage }}{{ item.message }} - {{ index }}</div>
    <!-- 3.也可以用解构赋值 -->
    <!-- 打印出：父级Foo - 0  父级Bar - 1 -->
    <div v-for="({ message }, index) of items"> {{ parentMessage }}{{ message }} - {{ index }}</div>

    <!-- 4.对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域： -->

    <li v-for="item in items">
        <span v-for="childItem in item.message">
            <!-- 打印出：Foo Bar -->
            {{ childItem }}
        </span>
    </li>

    <!-- 4. 也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法： -->
    <div v-for="item of items">
        <span v-for="childItem in item.message">
            <!-- 打印出：Foo Bar -->
            {{ childItem }}
        </span>
    </div>


    <!--5. <template> 上的 v-for
         与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块 -->

    <ul>
        <template v-for="item in items">
            <li>{{ item.message }}</li>
            <li class="divider" role="presentation"></li>
        </template>
    </ul>
</template> 
 

  
<script setup>
import { ref, reactive, computed } from "vue";
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

// 3. 在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。
const parentMessage = ref("父级")
// 3. 添加索引渲染也就是和forEach一样
items.value.forEach((item, index) => {
    // 可以访问外层的 `parentMessage`
    // 而 `item` 和 `index` 只在这个作用域可用
    console.log(parentMessage.value, item.message, index)
})


</script>



